<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Survey progress (Determinate progress bar)</h2>
      <mat-progress-bar
        mode="determinate"
        [value]="surveyProgress"
        color="primary"
        aria-label="Survey progress"
      />
    </section>

    <section>
      <h2>Video progress (Progress bar with buffer)</h2>
      <mat-progress-bar
        [value]="videoPlayValue"
        [bufferValue]="videoBufferValue"
        mode="buffer"
        color="primary"
        aria-label="Video progress"
      />
    </section>

    <section>
      <h2>Loading content progress (Indeterminate progress bar)</h2>
      <mat-progress-bar mode="indeterminate" color="warn" aria-label="Loading content" />
    </section>

    <section>
      <h2>Search progress (Query progress bar)</h2>
      <mat-progress-bar mode="query" color="accent" aria-label="Searching" />
    </section>
  </mat-card-content>
</mat-card>
